
.animation-slide-left {
  animation: fadeInLeft 800ms ease alternate forwards;
  @keyframes fadeInLeft {
    from {
      opacity: 1;
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}

.animation-slide-right {
  animation: fadeInRight 800ms ease alternate forwards;
  @keyframes fadeInRight {
    from {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate(100%, 0);
      transform: translate(100%, 0);
    }
  }
}

.animation-slide-top {
  animation: fadeInTop 800ms ease alternate forwards;
  @keyframes fadeInTop {
    from {
      opacity: 1;
      -webkit-transform: translate(0, -1000px);
      transform: translate(0, -1000px);
    }
    to {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}

.animation-slide-bottom {
  animation: fadeInBottom 800ms ease alternate forwards;
  @keyframes fadeInBottom {
    from {
      opacity: 1;
      -webkit-transform: translate(0, 1000px);
      transform: translate(0, 1000px);
    }
    to {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}
